<template>
  <view class="share-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">←</view>
      <view class="title">分享案件</view>
      <view class="close-btn" @click="goBack">×</view>
    </view>

    <!-- 案件信息 -->
    <view class="case-info">
      <view class="case-tag" :class="'tag-' + caseData.type">
        {{ getTypeText(caseData.type) }}
      </view>
      <view class="case-title">{{ caseData.title }}</view>
    </view>

    <!-- 选择律师 -->
    <view class="lawyer-section">
      <view class="section-title">选择律师</view>
      <view class="section-subtitle">请选择需要分享案件的律师</view>
      
      <!-- 搜索栏 -->
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索律师姓名" 
          v-model="searchKeyword"
          @input="onSearch"
        />
      </view>

      <!-- 律师列表 -->
      <view class="lawyer-list">
        <view 
          class="lawyer-item" 
          v-for="lawyer in filteredLawyers" 
          :key="lawyer.id"
          :class="{ selected: selectedLawyer && selectedLawyer.id === lawyer.id }"
          @click="selectLawyer(lawyer)"
        >
          <view class="lawyer-avatar">👤</view>
          <view class="lawyer-info">
            <view class="lawyer-name">{{ lawyer.name }}</view>
            <view class="lawyer-firm">{{ lawyer.firm }}</view>
          </view>
          <view class="select-icon" v-if="selectedLawyer && selectedLawyer.id === lawyer.id">
            ✓
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="cancel-btn" @click="goBack">取消</view>
      <view class="confirm-btn" @click="confirmShare">确认分享</view>
    </view>
  </view>
</template>

<script>
import { getCaseById } from '../../src/services/caseService.js'
import { getLawyers, shareCaseToLawyer } from '../../src/services/lawyerService.js'

export default {
  data() {
    return {
      caseId: '',
      caseData: {
        id: '',
        title: '',
        type: 'civil'
      },
      lawyers: [],
      filteredLawyers: [],
      selectedLawyer: null,
      searchKeyword: ''
    }
  },
  onLoad(options) {
    this.caseId = options.caseId
    this.loadData()
  },
  methods: {
    loadData() {
      // 加载案件数据
      this.caseData = getCaseById(this.caseId) || {
        id: this.caseId,
        title: '张三与李四合同纠纷案件',
        type: 'civil'
      }
      
      // 加载律师列表
      this.lawyers = getLawyers()
      this.filteredLawyers = [...this.lawyers]
    },
    getTagClass(type) {
      return `tag-${type}`
    },
    getTypeText(type) {
      const typeMap = {
        civil: '民事案件',
        criminal: '刑事案件',
        admin: '行政案件'
      }
      return typeMap[type] || '其他案件'
    },
    onSearch() {
      if (this.searchKeyword) {
        this.filteredLawyers = this.lawyers.filter(lawyer => 
          lawyer.name.includes(this.searchKeyword)
        )
      } else {
        this.filteredLawyers = [...this.lawyers]
      }
    },
    selectLawyer(lawyer) {
      this.selectedLawyer = lawyer
    },
    confirmShare() {
      if (!this.selectedLawyer) {
        uni.showToast({ title: '请选择律师', icon: 'none' })
        return
      }

      try {
        shareCaseToLawyer(this.caseId, this.selectedLawyer.id)
        uni.showToast({ title: '分享成功', icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      } catch (error) {
        uni.showToast({ title: '分享失败', icon: 'none' })
      }
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.share-container {
  min-height: 100vh;
  background: #f7f8fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #fff;
  border-bottom: 2rpx solid #f1f5f9;
}

.back-btn, .close-btn {
  font-size: 32rpx;
  color: #3b82f6;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.case-info {
  background: #fff;
  padding: 32rpx 24rpx;
  margin-bottom: 16rpx;
}

.case-tag {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.tag-civil {
  background: #dbeafe;
  color: #1d4ed8;
  border: 2rpx solid #3b82f6;
}

.case-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.lawyer-section {
  background: #fff;
  padding: 32rpx 24rpx;
  margin-bottom: 120rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.section-subtitle {
  font-size: 26rpx;
  color: #6b7280;
  margin-bottom: 24rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 24rpx;
  padding: 0 20rpx;
  height: 72rpx;
  margin-bottom: 24rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #9ca3af;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #1f2937;
}

.lawyer-list {
  max-height: 600rpx;
  overflow-y: auto;
}

.lawyer-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f1f5f9;
  position: relative;
}

.lawyer-item:last-child {
  border-bottom: none;
}

.lawyer-item.selected {
  background: #f0f9ff;
}

.lawyer-avatar {
  width: 80rpx;
  height: 80rpx;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #6b7280;
  margin-right: 20rpx;
}

.lawyer-info {
  flex: 1;
}

.lawyer-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.lawyer-firm {
  font-size: 26rpx;
  color: #6b7280;
}

.select-icon {
  width: 40rpx;
  height: 40rpx;
  background: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24rpx;
  font-weight: 600;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx;
  display: flex;
  gap: 24rpx;
  border-top: 2rpx solid #f1f5f9;
}

.cancel-btn {
  flex: 1;
  height: 80rpx;
  background: #f9fafb;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #6b7280;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  background: #3b82f6;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #fff;
  font-weight: 600;
}
</style>
